/**
 * Created by 86185 in 2020/8/28 on 21:41
 */
import React from "react"

import "@/components/HotPlaceWatch/HotPlaceWatch.component.styl"

import RotationChart from "@/components/common/RotationChart/RotationChart.component"

class HotPlaceWatch extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            rotationData: {
                imgPathList: this.getImgList()
            }
        }
    }

    getImgList() {
        let placeName = ["黄果树景区", "梵净山景区", "荔波风景区", "马岭河峡谷风景区", "遵义会议会址", "镇远古城", "赤水风景区"];
        let list = [];
        for (let i = 0; i < 7; i++) {
            list.push({
                url: `home/lb-${i + 1}.jpg`,
                weather: 35,
                name: placeName[i],
                status: Math.round(Math.random())
            });
        }
        return list;
    }

    render() {
        return (
            <div className="hot-place-watch">
                <div className="icon">
                    <i className="icon-1 fa fa-chevron-up"></i>
                    <i className="icon-2 fa fa-chevron-up"></i>
                    <i className="icon-3 fa fa-chevron-up"></i>
                    <i className="icon-4 fa fa-chevron-up"></i>
                </div>
                <div className="title">
                    <i className="left-icon fa fa-angle-right">
                        <i className="fa fa-angle-right"></i>
                    </i>
                    <span className="text">全省景区实时监控</span>
                    <i className="right-icon fa fa-angle-left">
                        <i className="fa fa-angle-left"></i>
                    </i>
                </div>
                <div className="chart">
                    <RotationChart rotationData={this.state.rotationData}></RotationChart>
                </div>
            </div>
        );
    }
}

export default HotPlaceWatch